<style>
    .profile-avatar-container {
        position: relative;
        width: 100px;
    }

    .profile-avatar-container .profile-user-img {
        width: 100px;
        height: 100px;
    }

    .profile-avatar-container .profile-avatar-text {
        display: none;
    }

    .profile-avatar-container:hover .profile-avatar-text {
        display: block;
        position: absolute;
        height: 100px;
        width: 100px;
        background: #444;
        opacity: .6;
        color: #fff;
        top: 0;
        left: 0;
        line-height: 100px;
        text-align: center;
    }

    .profile-avatar-container button {
        position: absolute;
        top: 0;
        left: 0;
        width: 100px;
        height: 100px;
        opacity: 0;
    }
</style>
<div class="row animated fadeInRight">
    <div class="col-md-4">
        <div class="box box-success">
            <div class="panel-heading">
                {:__('Profile')}
            </div>
            <div class="panel-body">
                <form id="profile-form" role="form" data-toggle="validator" method="POST" action="{:url('api/user/profile')}">
                    {:token()}
                    <input type="hidden" name="avatar" id="c-avatar" value="{$user.avatar}"/>
                    <div class="box-body box-profile">
                        <div class="profile-avatar-container">
                            <img class="profile-user-img img-responsive img-circle plupload" src="{$user.avatar}" alt="">
                            <div class="profile-avatar-text img-circle">{:__('Click to edit')}</div>
                            <button id="plupload-avatar" class="plupload" data-mimetype="png,jpg,jpeg,gif" data-input-id="c-avatar"><i class="fa fa-upload"></i> {:__('Upload')}</button>
                        </div>
                        <h3 class="profile-username text-center">{$user.username}
                            {if $user.level>0}<img width="20" height="20" src="__CDN__{$user.level_img}" title="{$user.level_name}"/>{/if}
                        </h3>
                        <div class="form-group">
                            <label class="control-label">{:__('Nickname')}:</label>
                            <input type="text" class="form-control" id="nickname" name="nickname" value="{$user.nickname}" data-rule="required" placeholder="">
                        </div>
                        <div class="form-group">
                            <label for="c-bio" class="control-label">{:__('Intro')}:</label>
                            <input id="c-bio" data-rule="" data-tip="一句话介绍一下你自己" class="form-control" name="bio" type="text" value="{$user.bio}">
                        </div>
                        <div class="form-group">
                            <label for="c-email" class="control-label">{:__('Email')}:</label>
                            <div class="input-group">
                                <input type="text" class="form-control" id="c-email" name="email" value="{$user.email}" disabled placeholder="">
                                <span class="input-group-btn" style="padding:0;border:none;">
                                    <a href="javascript:;" class="btn btn-info btn-change" data-type="email">{:__('Change')}</a>
                                </span>
                            </div>

                        </div>
                        <div class="form-group">
                            <label for="c-mobile" class="control-label">{:__('Mobile')}:</label>
                            <div class="input-group">
                                <input type="text" class="form-control" id="c-mobile" name="mobile" value="{$user.mobile}" disabled placeholder="">
                                <span class="input-group-btn" style="padding:0;border:none;">
                                    <a href="javascript:;" class="btn btn-info btn-change" data-type="mobile">{:__('Change')}</a>
                                </span>
                            </div>

                        </div>
                        <div class="form-group normal-footer text-center">
                            <button type="submit" class="btn btn-success btn-embossed disabled">{:__('Ok')}</button>
                            <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="col-md-8">
        <div class="panel panel-default panel-intro panel-nav">
            <div class="panel-heading">
                <ul class="nav nav-tabs">
                    <li class="active"><a href="#one" data-toggle="tab"><i class="fa fa-list"></i> 基本信息</a></li>
                    <li><a href="#two" data-toggle="tab"><i class="fa fa-circle-o"></i> </a></li>
                </ul>
            </div>
            <div class="panel-body">
                <div id="myTabContent" class="tab-content">
                    <div class="tab-pane fade active in" id="one">
                        <ul class="list-group list-group-unbordered">
                            <li class="list-group-item">
                                <b>{:__('Lv')}</b> <a class="pull-right">{$user.level}</a>
                            </li>
                            <li class="list-group-item">
                                <b>{:__('Balance')}</b> <a class="pull-right">{$user.money|default=0}</a>
                            </li>
                            <li class="list-group-item">
                                <b>{:__('Score')}</b> <a class="pull-right">{$user.score}</a>
                            </li>
                            <li class="list-group-item">
                                <b>{:__('Successions')}</b> <a class="pull-right">{$user.successions} {:__('Day')}</a>
                            </li>
                            <li class="list-group-item">
                                <b>{:__('Maxsuccessions')}</b> <a class="pull-right">{$user.maxsuccessions} {:__('Day')}</a>
                            </li>
                            <li class="list-group-item">
                                <b>{:__('Logintime')}</b> <a class="pull-right">{$user.logintime|date="Y-m-d H:i:s",###}</a>
                            </li>
                            <li class="list-group-item">
                                <b>{:__('Prevtime')}</b> <a class="pull-right">{$user.prevtime|date="Y-m-d H:i:s",###}</a>
                            </li>
                        </ul>
                    </div>
                    <div class="tab-pane fade" id="two">

                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/html" id="emailtpl">
    <form id="email-form" class="form-horizontal form-layer" method="POST" action="{:url('api/user/changeemail')}">
        <div class="form-body">
            <input type="hidden" name="action" value="changeemail"/>
            <div class="form-group">
                <label class="control-label col-xs-12 col-sm-3">{:__('New Email')}:</label>
                <div class="col-xs-12 col-sm-8">
                    <input type="text" class="form-control" id="email" name="email" value="" data-rule="required;email;remote({:url('api/validate/check_email_available')}, event=changeemail, id={$user.id})" placeholder="{:__('New email')}">
                    <span class="msg-box"></span>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-xs-12 col-sm-3">{:__('Captcha')}:</label>
                <div class="col-xs-12 col-sm-8">
                    <div class="input-group">
                        <input type="text" name="captcha" id="email-captcha" class="form-control" data-rule="required;length(4);integer[+];remote({:url('api/validate/check_ems_correct')}, event=changeemail, email:#email)"/>
                        <span class="input-group-btn" style="padding:0;border:none;">
                            <a href="javascript:;" class="btn btn-info btn-captcha" data-url="{:url('api/ems/send')}" data-type="email" data-event="changeemail">获取验证码</a>
                        </span>
                    </div>
                    <span class="msg-box"></span>
                </div>
            </div>
        </div>
        <div class="form-footer">
            <div class="form-group" style="margin-bottom:0;">
                <label class="control-label col-xs-12 col-sm-3"></label>
                <div class="col-xs-12 col-sm-8">
                    <button type="submit" class="btn btn-md btn-info">{:__('Submit')}</button>
                </div>
            </div>
        </div>
    </form>
</script>
<script type="text/html" id="mobiletpl">
    <form id="mobile-form" class="form-horizontal form-layer" method="POST" action="{:url('api/user/changemobile')}">
        <div class="form-body">
            <input type="hidden" name="action" value="changemobile"/>
            <div class="form-group">
                <label for="c-mobile" class="control-label col-xs-12 col-sm-3">{:__('New mobile')}:</label>
                <div class="col-xs-12 col-sm-8">
                    <input type="text" class="form-control" id="mobile" name="mobile" value="" data-rule="required;mobile;remote({:url('api/validate/check_mobile_available')}, event=changemobile, id={$user.id})" placeholder="{:__('New mobile')}">
                    <span class="msg-box"></span>
                </div>
            </div>
            <div class="form-group">
                <label for="mobile-captcha" class="control-label col-xs-12 col-sm-3">{:__('Captcha')}:</label>
                <div class="col-xs-12 col-sm-8">
                    <div class="input-group">
                        <input type="text" name="captcha" id="mobile-captcha" class="form-control" data-rule="required;length(4);integer[+];remote({:url('api/validate/check_sms_correct')}, event=changemobile, mobile:#mobile)"/>
                        <span class="input-group-btn" style="padding:0;border:none;">
                            <a href="javascript:;" class="btn btn-info btn-captcha" data-url="{:url('api/sms/send')}" data-type="mobile" data-event="changemobile">获取验证码</a>
                        </span>
                    </div>
                    <span class="msg-box"></span>
                </div>
            </div>
        </div>
        <div class="form-footer">
            <div class="form-group" style="margin-bottom:0;">
                <label class="control-label col-xs-12 col-sm-3"></label>
                <div class="col-xs-12 col-sm-8">
                    <button type="submit" class="btn btn-md btn-info">{:__('Submit')}</button>
                </div>
            </div>
        </div>
    </form>
</script>
<style>
    .form-layer {
        height: 100%;
        min-height: 150px;
        min-width: 300px;
    }

    .form-body {
        width: 100%;
        overflow: auto;
        top: 0;
        position: absolute;
        z-index: 10;
        bottom: 50px;
        padding: 15px;
    }

    .form-layer .form-footer {
        height: 50px;
        line-height: 50px;
        background-color: #ecf0f1;
        width: 100%;
        position: absolute;
        z-index: 200;
        bottom: 0;
        margin: 0;
    }

    .form-footer .form-group {
        margin-left: 0;
        margin-right: 0;
    }
</style>